<template>
    <div class="container-grid">
        <div class="header-search-el box-row box-center-end">
            <el-button
                @click="onAddClick"
                v-if="permissionsData.add"
                class="btn-blue"
                icon="el-icon-plus"
            >
                新增
            </el-button>
        </div>
        <vxe-grid
            ref="xTree"
            row-id="menu_sn"
            v-bind="tableConfig"
            :data="dataStore.data"
            :columns="table.columns"
        >
            <template v-slot:operate="{ row }">
                <ux-btn-group
                    :btns="table.btns"
                    :data="{ row, permissionsData }"
                ></ux-btn-group>
            </template>
        </vxe-grid>
        <dialogForm
            ref="dialogForm"
            @submitSuccess="onSubmitSuccess"
            @closeDialog="onCloseDialog"
        ></dialogForm>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter, State } from "vuex-class";
import { mixinTableTreeStore } from "@/mixin/table/TreeStore";
import { mixinAccess } from "@/mixin/Access";
import { mixinTableOperation } from "@/mixin/table/Operation";
import { mixinDialogFormParent } from "@/mixin/dialog/FormParent";
import dialogForm from "./Edit.vue";
@Component({
    name: "systemAccessHome",
    mixins: [
        mixinTableTreeStore,
        mixinAccess,
        mixinDialogFormParent,
        mixinTableOperation
    ],
    components: {
        dialogForm
    }
})
export default class systemAccessHome extends Vue {
    @Action("systemAccess/all") getTree: any;
    @Action("systemAccess/del") itemDel: any;
    @Getter("systemAccess/all") treeData: any;
    treeQueryConfig: object = {
        id: "menu_sn"
    };
    @State((state) => state.sharing.menuType) menuTypeData: any;
    @State((state) => state.sharing.menuScope) menuScopeData: any;
    // 列表配置
    table: any = {
        btns: [
            {
                label: "添加子项",
                condition: [
                    "permissionsData.add",
                    function ({ row }) {
                        return row.menu_type != 3;
                    }
                ],
                handleClick: (this as any).onAddChildrenClick
            },
            {
                label: "编辑",
                condition: ["permissionsData.edit"],
                handleClick: (this as any).onEditClick
            },
            {
                label: "删除",
                condition: ["permissionsData.del"],
                handleClick: (this as any).onDelClick
            }
        ],
        // 字段配置
        columns: [
            {
                field: "menu_name",
                title: "菜单名称",
                treeNode: true,
                align: "left",
                minWidth: 150
            },
            {
                field: "menu_type",
                title: "菜单类型",
                align: "left",
                minWidth: 150,
                params: "menuTypeData",
                formatter: (this as any).formatterData
            },
            {
                field: "menu_path",
                title: "前端权限",
                align: "left",
                minWidth: 150
            },
            {
                field: "menu_backend_path",
                title: "后端权限",
                align: "left",
                minWidth: 150
            },
            {
                field: "sort",
                title: "排序值",
                align: "left",
                minWidth: 80
            },
            {
                field: "status",
                title: "菜单状态",
                align: "left",
                minWidth: 80,
                formatter: function ({ cellValue }) {
                    return ["", "启用", "禁用"][cellValue];
                },
                className: function ({ row }) {
                    return ["", "green ", "red"][row.status];
                }
            },
            {
                field: "menu_scope",
                title: "作用范围",
                align: "left",
                minWidth: 120,
                params: "menuScopeData",
                formatter: (this as any).formatterData
            },
            {
                showOverflow: "ellipsis",
                fixed: "right",
                title: "操作",
                slots: { default: "operate" },
                width: 210
            }
        ]
    };
    onAddChildrenClick({ row }) {
        const me = this as any;
        me.setDialogValue("selectItem", row);
        me.onAddClick();
    }
}
</script>
